import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import AgreementInfo from '../components/AgreementInfo';
import Agencyagreement from '../components/Agencyagreement';
import EditCustomer from '../components/EditCustomer';
import OperatorConstant from "../../../utils/OperatorConstant";
const R = require('ramda');

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

export default Form.create({wrappedComponentRef: true})(class CustomerApproval extends React.Component {
    constructor(props) {
        super(props);
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource

        this.state = {
            open: false,
            disabled: true,
            type: R.isNil(this.props.type) ? "" : this.props.type,
            require_memo:true,
            require_other:true,
            loading: false
        };

    }



    handleResetFields = () => {
        this.props.form.resetFields();
    }


    handleCancel = () => {
        this.props.form.resetFields()
        this.setState({ open: false, loading: false })
    }

    handleOpen = (isDisable,type) => {
        this.setState({open: true, disabled: isDisable,type:type});

    }

    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
            if (errors) return;

            if (this.state.disabled === true) {
                return;
            }
            this.setState({ loading: true });

            this.props.dispatch({
                type: 'customerApproval/approvalCustomer',
                payload: {
                    cstid: this.props.dataSource.id,
                    entityid: this.props.dataSource.id,
                    approvalresult: values.approvalresult,
                    approvalmemo: values.approvalmemo,
                    onSuccess:()=>{
                        this.props.handleSearch();
                        this.handleCancel();
                    },
                    onFail: () => this.setState({loading: false})
                }
            });


        })
    }

     renderContent = (value, row, index) => {
        const obj = {
            children: value,
            props: {},
        };
        if (index === 4) {
            obj.props.colSpan = 0;
        }

         if (index === 10) {
             obj.props.rowSpan = 0;
         }
        return obj;
    };


    columns = [{
        dataIndex: 'name',
        colSpan: 1,
        width: "250px",
        render: (text, row, index) => {

            if (index === 10) {
                return {
                    children: <Tabs tabPosition={'top'}><TabPane tab="营业信息" key="1"></TabPane></Tabs>,
                    props: {
                        colSpan: 4,
                    },
                };
            } else {
                const obj = {
                    children: text,
                    props: {},
                };
                if (index === 4) {
                    obj.props.colSpan = 0;
                }
                return obj;
            }

        },
    },
        {
            dataIndex: 'variable',
            width: "250px",
            colSpan: 1,
            render: this.renderContent,
        }, {
            dataIndex: 'name2',
            colSpan: 1,
            width: "250px",
            render: this.renderContent,
        }, {
            colSpan: 1,
            dataIndex: 'variable2',
            width: "250px",
            render: this.renderContent,
        }
    ];

    handleSelect=(value)=>{
        this.props.form.setFields({
            approvalmemo:{errors:null},
        });

        if(value==4){
            this.state.require_memo=false;
            this.state.require_other=true;
        }else{
            this.state.require_memo=true;
            this.state.require_other=false;
        }
    };



    render() {

        const { getFieldDecorator } = this.props.form;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 10 } }
        };

        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let data = [
            {key: '1', name: '客户名称', variable: dataSource.companyname, name2: '客户英文名称:', variable2: dataSource.companynameen},
            {key: '2', name: '客户简称', variable: dataSource.shortname, name2: '经营模式:', variable2: dataSource.businessmodel,},
            {key: '3', name: '公司地址', variable: dataSource.address, name2: '收件地址:', variable2:dataSource.recaddress,},
            {key: '4', name: '公司电话', variable: dataSource.telephone, name2: '公司传真:', variable2: dataSource.tax},
            {key: '6', name: '手机号码', variable: dataSource.mobile, name2: '电子邮箱', variable2: dataSource.email,},
            {key: '7', name: '企业类型', variable: dataSource.companytype, name2: '公司网址', variable2: dataSource.url,},
            {key: '8', name: '注册资本:', variable: dataSource.capital, name2: '成立日期:', variable2: dataSource.registerdate,},
            {key: '9', name: '工商注册号', variable: dataSource.bussiregno, name2: '纳税人识别码', variable2: dataSource.taxpayerid,},
            {key: '10', name: '组织机构代码', variable: dataSource.orgcode, name2: '海关注册登记号码:', variable2: dataSource.customsregno,},
            {key: '11', name: '企业法人:', variable: dataSource.entperson, name2: '是否查询企业信用信息:', variable2: dataSource.ischeckinfo,},
            {key: '12', name: '营业信息', variable: '', name2: '', variable2: '',},
            {key: '13', name: '主营行业:', variable: dataSource.industry, name2: '主要行业经营年限', variable2: dataSource.industrylife,},
            {key: '14', name: '主营产品:', variable: dataSource.mainproduct, name2: '预计每月出口额:', variable2: dataSource.premonthexportamount,},
            {key: '15', name: '年销售额(USD)', variable: dataSource.lastexports, name2: '主要收汇方式', variable2: dataSource.settlement,},
            {key: '16', name: '主要出口国家/地区', variable: dataSource.exportcountry, name2: '预计每年委托出口额', variable2:  dataSource.entrust,},

        ];
        let footer=[];
        footer.push(<Button onClick={this.handleCancel.bind(this)}>取消</Button>);
        if(this.state.type=="2"){
            footer.push(<Button type="primary" loading={this.state.loading} onClick={this.handleConfirm.bind(this)}>确认</Button>);
        }
        return (
            <Modal visible={this.state.open} title={"审核"} width={800} wrapClassName="vertical-center-modal"
                   footer={footer} onCancel={this.handleCancel}>

                <Form>
                    <Tabs tabPosition={'top'}>
                        <TabPane tab="基本信息" key="1">
                            {/*<Table showHeader={false} pagination={false} bordered={true} columns={this.columns} size={'small'} style={{marginTop: 0}} dataSource={data} width="80%"/>*/}
                            <EditCustomer wrappedComponentRef={(inst) => this.editCustomer = inst}
                                          disabled={true} type={OperatorConstant.edit}
                                          manager={this.props.manager}
                                          dataSource={dataSource}/>
                        </TabPane>

                        <TabPane tab="合作信息" key="2">
                            {<Agencyagreement wrappedComponentRef={(inst) => this.agencyagreement = inst} disabled={true}  cstid ={this.state.cstid}
                                              dispatch={this.props.dispatch}
                                              agencyagreement={this.props.agencyagreement}
                                              agencyagreementPage={this.props.agencyagreementPage} agencyagreementList={this.props.agencyagreementList}
                                              model ={"customerApproval"}
                            />}
                        </TabPane>
                        <TabPane tab="协议与资质" key="3">
                            {<AgreementInfo wrappedComponentRef={(inst) => this.agreementInfo = inst} disabled={true} dataSource={this.props.attachments} cstInfo={this.props.dataSource}/>}
                        </TabPane>
                    </Tabs>

                    <Tabs tabPosition={'top'}>
                        <TabPane tab="审核结果" key="1">
                            <Form>
                                <FormItem
                                    {...formItemLayout}
                                    label="请选择审核结果"
                                    hasFeedback
                                >
                                    {getFieldDecorator('approvalresult', {
                                        rules: [{
                                            required:true, message: '请选择审核结果！',
                                        }],
                                        initialValue: dataSource.status=="2"||dataSource.status=="1"?"3":dataSource.status
                                    })(
                                        <Select disabled={this.state.disabled} onChange={this.handleSelect.bind(this)}>
                                            <Option value="3">退回补充资料</Option>
                                            <Option value="4">审核通过</Option>
                                            <Option value="5">审核不通过</Option>
                                        </Select>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="备注"
                                    hasFeedback
                                >
                                    {getFieldDecorator('approvalmemo', {
                                        rules: [{
                                            required: this.state.require_memo, message: '请输入备注！',
                                        }],
                                        initialValue: (R.isEmpty(this.props.approvaList) || R.isNil(this.props.approvaList)) ? "" : this.props.approvaList[0].memo
                                    })(
                                        <Input disabled={this.state.disabled}/>
                                    )}
                                </FormItem>
                            </Form>
                        </TabPane>
                    </Tabs>
                </Form>
            </Modal>
        )
    }
})


// WEBPACK FOOTER //
// ./public/src/components/customer/components/CustomerApproval.js